<template>
  <div>
    <van-nav-bar :title="title1" />
    <div class="detailsImg">
      <img :src="img1" />
    </div>
    <div class="detailsSpan">
      <h2>{{goodsInfo.name}}</h2>
      <h3>所属种类：{{goodsInfo.type}}</h3>
      <h3>{{goodsInfo.subName}}</h3>
    </div>
  </div>
</template>
<script>
import { getGoodsDetail } from "../api/shop-api/shop-api";
export default {  
  created() {
    getGoodsDetail(this.$route.params.id).then(res => {
      (this.goodsInfo = res.data),
        (this.img1 = res.data.coverImgUrl),
        (this.title1 = res.data.name),
        console.log(res);
    });
  },
  data() {
    return {
      goodsInfo: {},
      title1: "",
      img1: ""
    };
  }
};
</script>
<style scoped>
.detailsImg {
  text-align: center;
}
img {
  width: 200px;
}
.detailsSpan {
  margin: 10px;
}
.detailsSpan h2 {
  color: orangered;
}
</style>